<template>
    <view class="nova-column">
        <image class="banner" src="../../static/jn/jn_head.png"></image>
        <view class="nova-column" style="padding: 34rpx;">
            <view class="nova-column publish" v-if="job">
                <view class="border-bottom nova-row-center">
                    <text class="job">{{ job.title }}</text>
                    <text style="color: #666; font-size: 24rpx;">根据业主需求选择您会的服务技能</text>
                </view>
                <view v-for="(item, index) in job.items" :key="index" class="nova-column">
                    <text class="title">{{ item.title }}</text>
                    <checkbox-group :id="item.key" :data-name="item.key" @change="change">
                        <view class="nova-row-center grid" v-for="(v, i) in item.values" :key="i" :style="{ marginTop: i > 0 ? '30rpx' : '0' }">
                            <text class="option">{{ v }}</text>
                            <label>
                                <checkbox class="chk" :value="v"></checkbox>
                                满足
                            </label>
                        </view>
                    </checkbox-group>
                </view>
                <text class="title">您还有什么要求</text>
                <textarea class="ta" placeholder="若您对业主的籍贯，性别，地址等有其他要求或者您有自我评价请在此填写" v-model="remarks"></textarea>
            </view>
            <button class="btn-primary" style="margin: 60rpx;" @click="doSubmit">提交</button>
        </view>
    </view>
</template>

<script>
import types from '../../common/publish-config.js';
import NovaGrid from '../../components/nova/grid.vue';
import NovaGridItem from '../../components/nova/grid-item.vue';
import NovaPref from '../../components/nova/pref.vue';

export default {
    components: {
        NovaGrid,
        NovaGridItem,
        NovaPref
    },
    data() {
        return {
            index: 0,
            job: undefined,
            areas: [],
            areaIndex: 0,
            info: {},
            form: {},
            remarks: ''
        };
    },
    methods: {
        change(e) {
            console.log(e);
            const name = e.target.name;
            const key = e.target.dataset.name;
            this.form[key] = e.detail.value;
        },
        async doSubmit(e) {
            let has = false;
            for (let k in this.form) {
                if (this.form[k].length > 0) {
                    has = true;
                    break;
                }
            }
            if (!has) {
                this.$toast('请至少选择一项满足的要求');
                return;
            }
            console.log(this.form);
            let t = JSON.parse(JSON.stringify(this.job));

            t.items.forEach(k => {
                let v = this.form[k.key];
                k.value = v ? v.join(',') : '';
            });
            let nurse_json = JSON.stringify({ section: [this.job] });
            let data = {
                publish_id: this.id,
                nurse_json: nurse_json,
                remarks: this.remarks
            };
            let res = await this.$request.post({
                url: '/aunt/apply',
                data: data
            });
            this.$toast('申请成功');
            // TODO send apply event
            let pages = getCurrentPages();
            let prev = pages[pages.length - 2];
            prev.setData({
                job_process: 1
            });
            let ev = {
                publish_id: this.id,
                remove: true,
                page: 'ay-home',
                job_process: 1
            };
            
            uni.$emit('jobStatusChange', ev);
            setTimeout(function() {
                uni.navigateBack({
                    delta: 2
                });
            }, 500);
        },
        changeArea(e) {
            this.areaIndex = e.detail.value;
            this.info = this.areas[this.areaIndex];
            //this.form.area =
        },
        async loadData() {
            let res = await this.$request.post({
                url: '/publish/nurseApply',
                data: {
                    publish_id: this.id
                }
            });
            if (!res) {
                this.$toast('获取的职位信息为空');
                return;
            }
            if (typeof res === 'string') {
                res = JSON.parse(res);
            }
            if (res.section) {
                let job = res.section[0];
                job.items.forEach(item => {
                    item.values = item.value ? item.value.split(',') : [];
                });
                this.job = job;
            }

            console.log(this.job);
        }
    },
    onLoad(options) {
        this.id = options.id;
        // #ifdef H5
        if (!this.id) {
            this.id = '7b2a2ba1292f4f95852c53042fc8b400';
        }
        // #endif
        this.loadData();
    }
};
</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    background-color: #fcfcfc;
}
.banner {
    width: 100%;
    height: 400rpx;
}
.publish {
    background-color: white;
    border-radius: 10rpx;
    border: 1px solid #f2f2f2;
    box-shadow: 0 0 2rpx #f1f1f1;
    padding: 0 32rpx;
    .border-bottom {
        border-color: #f2f2f2;
        border-style: solid;
        border-width: 0;
        @include thin-border(bottom);
    }
    .job {
        line-height: 95rpx;
        color: $uni-color-primary;
        padding-right: 50rpx;
        font-size: 34rpx;
    }
    .title {
        font-size: 30rpx;
        color: #333333;
        line-height: 95rpx;
    }
    .ta {
        border: 1px solid #ccc;
        border-radius: 10rpx;
        padding: 20rpx 34rpx;
        width: auto;
        height: 180rpx;
        margin-bottom: 60rpx;
    }
    /deep/ .pref-box {
        padding: 0;
        height: 96rpx;
        margin-top: 34rpx;
    }

    .grid {
        .option {
            min-width: 180rpx;
            height: 60rpx;
            color: white;
            font-size: 30rpx;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10rpx;
            background-color: #999999;
            padding-left: 4rpx;
            padding-right: 4rpx;
            margin-right: 30rpx;
        }
        .chk {
            transform: scale(0.5);
        }
        input.option {
            width: 180rpx;
            padding-left: 20rpx;
        }
        .checked {
            border: none;
            background-color: $uni-color-primary;
            color: white;
        }
    }
}
</style>
